<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    引入jquery-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>

<!--<input type="text" id="username">-->
<!--<input type="button" id="s">-->

<!--<script>-->
<!--    const xmh=new XMLHttpRequest();-->
<!--    xmh.open("get","/d/form");-->
<!--    xmh.send();-->
<!--    console.log(document.getElementById("username"));-->

<!--    xmh.onload=function (){-->
<!--        alert(xmh.responseText);-->
<!--        console.log(JSON.parse(xmh.responseText));-->
<!--    }-->

<!--</script>-->

    <table class="table table-hover table-bordered">
        <thead class="thead">
        <tr>
            <th>书名</th>
            <th>作者</th>
            <th>开始时间</th>
            <th>借书时间</th>
        </tr>
        </thead>

        <tbody class="tbody" id="tbody">

        </tbody>
    </table>

<br/>

</body>
<script>
    $.ajax({
        type:"get",
        url: "/lc",
        dataType: "json",
        success: function (result) {
            $('#tbody').empty();
            var html = ''
            $.each(result, function (index, data) {
                html += "<tr>";
                html += "<td>" + data.bookName+ "</td>";
                html += "<td>" + data.author+ "</td>";
                html += "<td>" + data.startTime+ "</td>";
                html += "<td>" + data.endTime+ "</td>";
                html += "</tr>";
            });
            $('#tbody').append(html);
        }
    });
</script>
</html>